<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 400px;height: 225px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'papers',
		data() {
			return{
				cockpitData:[],
				textData:[
					{
						"publish_year":"2018",
						"quanguo":13912,
						"zhejiang":563,
						"ningbo":55,
					},
					{
						"publish_year":"2019",
						"quanguo":15537,
						"zhejiang":672,
						"ningbo":70,
					},
					{
						"publish_year":"2020",
						"quanguo":17372,
						"zhejiang":756,
						"ningbo":80,
					}
				]
			}
		},
		mounted() {
			// this.getList()
			this.myEcharts()
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
						"normGuid": "74055ba7-989e-4c27-a97e-1321fdc7c553",
						"fieldList": []
					}
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				_this.cockpitData=result.cockpitData
				_this.$nextTick(()=>{
					_this.myEcharts();
				})
			},
			myEcharts() {
				// console.log(this.cockpitData)
				// let itemTitle=['2018', '2019', '2020']
				/*let itemTitle=this.cockpitData.map(item=>{
					return item.publish_year
				})
				let chb=this.cockpitData.map(item=>{
					return item.中国
				})
				let zjb=this.cockpitData.map(item=>{
					return item.浙江
				})
				let nbb=this.cockpitData.map(item=>{
					return item.宁波
				})
				let chl=this.cockpitData.map(item=>{
					return item.中国增长
				})
				let zjl=this.cockpitData.map(item=>{
					return item.浙江增长
				})
				let nbl=this.cockpitData.map(item=>{
					return item.宁波增长
				})*/
				let itemTitle=this.textData.map(item=>{
					return item.publish_year
				})
				let chb=this.textData.map(item=>{
					return item.quanguo
				})
				let zjb=this.textData.map(item=>{
					return item.zhejiang
				})
				let nbb=this.textData.map(item=>{
					return item.ningbo
				})
				
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				
				let colorArr = ["#70C1FF", '#CFB8F3','#F3F3B8']
				// let ctime = '2021.01'
				
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					tooltip: {
						show: false,
					},
					legend: {
						show: true,
						bottom:3,
						left:70,
						itemWidth:10,
						itemHeight:10,
						textStyle: {
						      color: "#DFF8FF",
							  fontSize:17
						    },
						icon: "circle",
						itemGap: 40,
						data: ['全国', '浙江','宁波'],
					},
					title:{
						show:false
						// x: '65%',
						// y: 0,
						// subtext: '统计时间：'+ctime,
						// subtextStyle:{
						// 	fontSize: 15,
						// 	color:'#B7B7B7',
						// 	fontFamily:'Arial',
						// }
					},
					grid: {
						left: '1.5%',
						right: '8%',
						top: '8%',
						width: "90%",
						height:'80%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						axisTick :{
							show:false,
						},
						axisLabel: {
							color: '#DFF8FF',
							fontSize: 17,
							interval:0,
						},
						data: itemTitle,
						type: 'category',
						show: true,
					}],
					yAxis: [{
						id:0,
						splitLine: {
							show: true,
							lineStyle:{
								type:'dotted',
								color:'#556468',
								width:1
							}
						},
						axisLine: { //y轴
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							} 
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							align: "center",
							margin: 30,
						}
					},
					/*{
						id:1,
						splitLine: {
							show: true,
							lineStyle:{
								type:'dotted',
								color:'#556468',
								width:1
							}
						},
						axisLine: { //y轴
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							align: "center",
							margin: 20,
						}
					}*/
					],
					series: [
						{
						    type: 'bar',
							yAxisIndex: 0,
						    name:'全国',
						    barWidth: 12,
						    data:chb,
							barGap:1,
							label: {
								show: true,
								position: 'top', // 位置
								color: '#C1E2FF',
								fontSize: 13,
								fontWeight:600,
								distance: 3, // 距离
								formatter: '{c}' // 这里是数据展示的时候显示的数据
							}, // 柱子上方的数值
						    itemStyle: {
						      borderRadius:[10,10,4,4],
						      color:new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
						        [{
						          offset: 0, color: '#2682FF' // 0% 处的颜色
						        }, {
						          offset: 1, color: '#04CDF4' // 100% 处的颜色
						        }])
						    }
						  },
						  {
						    type: 'bar',
						    name:'浙江',
							yAxisIndex: 0,
						    barWidth: 12,
						    data:zjb,
							// barGap:'115%',
							label: {
								show: true,
								position: 'top', // 位置
								color: '#C1E2FF',
								fontSize: 13,
								fontWeight:600,
								distance: 12, // 距离
								formatter: '{c}' // 这里是数据展示的时候显示的数据
							}, // 柱子上方的数值
						    itemStyle: {
						      color:new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
						          [{
						            offset: 0, color: '#712ACE' // 0% 处的颜色
						          }, {
						            offset: 1, color: '#AF89EB' // 100% 处的颜色
						          }]),
						      borderRadius:[10,10,4,4]
						    }
						  },
						  {
						    type: 'bar',
						    name:'宁波',
							yAxisIndex: 0,
						    barWidth: 12,
						    data:nbb,
							label: {
								show: true,
								position: 'top', // 位置
								color: '#C1E2FF',
								fontSize: 13,
								fontWeight:600,
								distance: 3, // 距离
								formatter: '{c}' // 这里是数据展示的时候显示的数据
							}, // 柱子上方的数值
						    itemStyle: {
						      color:new this.$echarts.graphic.LinearGradient(0, 1, 0, 0,
						          [{
						            offset: 0, color: '#F5AF0F' // 0% 处的颜色
						          }, {
						            offset: 1, color: '#F5D75F' // 100% 处的颜色
						          }]),
						      borderRadius:[10,10,4,4]
						    }
						  },
						 /* {
						    type: 'line',
						    name:'2018', 
							yAxisIndex: 1,
						    data:chl,
							xAxisIndex: 1,
							// symbolOffset:[-14,5],
							symbol:'circle',
							symbolSize:6,
							color:colorArr[0],
							itemStyle: {
								color:'#000',
							    borderType:'solid',
								borderWidth:1,
								borderColor:colorArr[0],
							},
							lineStyle:{
								color:colorArr[0],
							}
						  },
						{
							type:'line',
						    name:'2019',
							yAxisIndex: 1,
							symbol:'circle',
							symbolSize:6,
						    data:zjl,
							// symbolOffset:[0,5],
							color:colorArr[1],
							itemStyle: {
								color:'#000',
							    borderType:'solid',
								borderWidth:1,
								borderColor:colorArr[1],
							},
							lineStyle:{
								color:colorArr[1],
							}
						},
						{
							type:'line',
						    name:'2020',
							yAxisIndex: 1,
						    data:nbl,
							xAxisIndex: 2,
							symbol:'circle',
							symbolSize:6,
							// symbolOffset:[14,5],
							color:colorArr[2],
							itemStyle: {
								color:'#000',
							    borderType:'solid',
								borderWidth:1,
								borderColor:colorArr[2],
							},
							lineStyle:{
								color:colorArr[2],
							}
						}*/
						]
				};
				/*option.xAxis[1] = {
				    type: 'value',
				    max: option.xAxis[0].data.length * 100,
				    show: false
				};
				option.xAxis[2] = {
				    type: 'value',
				    max: option.xAxis[0].data.length * 100,
				    show: false
				};
				option.series[3].data = option.series[3].data.map((x, i) => [36 + i * 100, x-5]);
				option.series[4].data = option.series[4].data.map((x, i) => [i, x-5]);
				option.series[5].data = option.series[5].data.map((x, i) => [64 + i * 100, x-5]);*/
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
			}
		}
	}
</script>


<style>

</style>
